<script setup>
import { ref, defineExpose, defineProps, defineEmits } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
let show = ref(false)
let open = () => {
  show.value = true
}
let handleCancel = () => {
  emit('cancel')
  show.value = false
}
let handleConfirm = () => {
  emit('confirm')
  show.value = false
}
let props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  cancelText: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: ''
  }
})
let emit = defineEmits(['confirm', 'cancel'])
defineExpose({
  open
})
</script>

<template>
  <van-overlay z-index="99" :show="show">
    <div class="wrapper">
      <div class="card">
        <div class="card_title">
          <div class="card_title_lebei">{{ props.title }}</div>
          <div class="card_title_icon" @click="show = false">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 40 40" fill="none">
              <path
                d="M9.19478 7.11888L19.7602 17.6852L30.3275 7.11888C30.5386 6.90781 30.7892 6.74038 31.0649 6.62615C31.3407 6.51192 31.6363 6.45313 31.9348 6.45313C32.2333 6.45312 32.5289 6.51192 32.8046 6.62615C33.0804 6.74038 33.331 6.90781 33.5421 7.11888C33.7531 7.32995 33.9206 7.58053 34.0348 7.8563C34.149 8.13208 34.2078 8.42765 34.2078 8.72615C34.2078 9.02465 34.149 9.32023 34.0348 9.596C33.9206 9.87178 33.7531 10.1224 33.5421 10.3334L22.9748 20.8989L33.5421 31.4662C33.7546 31.6769 33.9234 31.9275 34.0388 32.2037C34.1542 32.4798 34.2139 32.7761 34.2145 33.0754C34.2151 33.3746 34.1566 33.6711 34.0424 33.9477C33.9281 34.2244 33.7603 34.4757 33.5486 34.6873C33.337 34.8989 33.0856 35.0666 32.809 35.1808C32.5323 35.295 32.2358 35.3534 31.9365 35.3527C31.6372 35.352 31.341 35.2922 31.0649 35.1767C30.7888 35.0613 30.5382 34.8924 30.3275 34.6798L19.7602 24.1134L9.19478 34.6798C8.76614 35.0938 8.19204 35.3229 7.59614 35.3177C7.00024 35.3125 6.43021 35.0735 6.00883 34.6521C5.58744 34.2307 5.34842 33.6607 5.34325 33.0648C5.33807 32.4689 5.56715 31.8948 5.98114 31.4662L16.5466 20.8989L5.98114 10.3334C5.55794 9.90663 5.32104 9.32957 5.32227 8.72853C5.3235 8.12749 5.56276 7.55141 5.9877 7.12635C6.41265 6.70129 6.98866 6.46186 7.5897 6.46046C8.19074 6.45906 8.76786 6.6958 9.19478 7.11888Z"
                fill="black" />
            </svg>
          </div>
        </div>
        <div class="card_content">
          <slot></slot>
        </div>
        <div class="card_footer">
          <div class="card_footer_btn" @click="handleCancel">{{ props.cancelText || t('popup_cancel') }}</div>
          <div class="card_footer_btn" @click="handleConfirm">{{ props.confirmText || t('popup_confirm') }}</div>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<style scoped lang="scss">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.card {
  padding: 14px;
  width: 344px;
  border-radius: 20px;
  background: #FFF;
  box-sizing: border-box;

  &_title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .card_title_lebei {
      color: #000;
      font-family: "Source Han Sans CN";
      font-size: 18px;
      font-style: normal;
      font-weight: 700;
      line-height: 50px;
      /* 147.059% */
    }
  }

  &_content {
    min-height: 100px;
  }

  &_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &_btn {
      display: flex;
      width: 150px;
      height: 50px;
      padding: 8px 20px;
      justify-content: center;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      border-radius: 10px;
      color: #FFF;
      text-align: center;
      font-family: "Source Han Sans CN";
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      /* 147.059% */
      background: var(--5, radial-gradient(41.55% 42.54% at 52.19% 100%, #89A6EA 0%, #688EFF 55.29%, #164BD6 100%));
      box-shadow: 0 8px 32px 0 rgba(0, 60, 255, 0.34), 0 0 20px 0 rgba(163, 192, 255, 0.57) inset;

      &:active {
        opacity: .8;
      }

      &:first-child {
        border-radius: 10px;
        background: radial-gradient(41.55% 42.54% at 52.19% 100%, #7E95C7 0%, #5F6E90 100%);
        box-shadow: 0 8px 32px 0 rgba(0, 60, 255, 0.34), 0 0 20px 0 rgba(255, 255, 255, 0.20) inset;
      }
    }
  }
}

.card_title_icon {
  width: 20px;
  height: 20px;
  fill: #000;
}
</style>
